<template>
	<div class="contact-us-container">
		<h1 class="contact-us-title">联系我们</h1>
		<div class="contact-info">
			<h2 class="info-title">位置地图</h2>
			<div class="map-container" ref="mapContainer">
				<!-- 地图区域显示学校地址 -->
				<div class="map-content"
					style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;">
					<p class="school-address">浙江省宁波市江北区风华路495号</p>
				</div>
				<div class="map-tip" @click="openFullMap">点击查看详细地图</div>
			</div>
		</div>
		<p><span class="label">在线客服：</span>
			<button class="chat-button" @click="openChat">
				<i class="fas fa-comments"></i> 点击咨询
			</button>
		</p>

		<!-- 客服聊天窗口 -->
		<div v-if="chatOpen" class="chat-window">
			<div class="chat-header">
				<h3>在线客服</h3>
				<button @click="closeChat">×</button>
			</div>
			<div class="chat-messages">
				<div v-for="(message, index) in chatMessages" :key="index" class="message-item">
					<p v-if="message.type === 'user'" class="user-message">{{ message.content }}</p>
					<p v-if="message.type === 'system'" class="system-message">{{ message.content }}</p>
				</div>
			</div>
			<div class="chat-input">
				<input type="text" v-model="message" placeholder="输入您的问题..." @keyup.enter="sendMessage">
				<button @click="sendMessage">发送</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ContactUs',
		data() {
			return {
				chatOpen: false,
				message: '',
				// 更新为浙江纺织服装职业技术学校的坐标
				mapCenter: {
					lng: 121.5715, // 学校经度
					lat: 29.9147 // 学校纬度
				},
				chatMessages: [{
					type: 'system',
					content: '客服已上线，请问有什么可以帮助您？'
				}]
			};
		},
		methods: {
			openChat() {
				this.chatOpen = true;
			},
			closeChat() {
				this.chatOpen = false;
			},
			sendMessage() {
				if (this.message.trim() !== '') {
					this.chatMessages.push({
						type: 'user',
						content: this.message
					});

					setTimeout(() => {
						this.chatMessages.push({
							type: 'system',
							content: '感谢您的咨询，我们会尽快处理您的问题。'
						});
						this.scrollToBottom();
					}, 500);

					this.message = '';
					this.scrollToBottom();
				}
			},
			scrollToBottom() {
				const container = this.$el.querySelector('.chat-messages');
				if (container) {
					container.scrollTop = container.scrollHeight;
				}
			},
			openFullMap() {
				// 打开百度地图并定位到学校
				window.open(`https://map.baidu.com/?q=${this.mapCenter.lng},${this.mapCenter.lat}&type=map`, '_blank');
			}
		}
	};
</script>

<style scoped>
	.contact-us-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		background-color: #fff;
		font-family: Arial, sans-serif;
		line-height: 1.6;
	}

	.contact-us-title {
		font-size: 32px;
		color: #333;
		margin-bottom: 20px;
		text-align: center;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	}

	.contact-info {
		margin-bottom: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		padding: 15px;
		background-color: #f9f9f9;
	}

	.info-title {
		font-size: 24px;
		color: #333;
		margin-bottom: 10px;
		border-bottom: 2px solid #007bff;
		padding-bottom: 5px;
	}

	.label {
		font-weight: bold;
		margin-right: 5px;
	}

	.map-container {
		width: 100%;
		height: 300px;
		margin-top: 10px;
		position: relative;
		border: 1px solid #e0e0e0;
		background-color: #f5f5f5;
	}

	.map-content {
		color: #333;
	}

	.school-address {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.school-name {
		font-size: 16px;
		color: #555;
	}

	.map-tip {
		position: absolute;
		bottom: 10px;
		left: 10px;
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 5px 10px;
		border-radius: 3px;
		font-size: 14px;
		z-index: 1;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.map-tip:hover {
		background-color: rgba(0, 0, 0, 0.7);
	}

		.chat-button {
		background-color: #007bff;
		color: white;
		border: none;
		padding: 8px 15px;
		border-radius: 4px;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		transition: background-color 0.3s;
	}

	.chat-button:hover {
		background-color: #0056b3;
	}

	.chat-button i {
		margin-right: 5px;
	}

	.chat-window {
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: 350px;
		height: 400px;
		border: 1px solid #e0e0e0;
		border-radius: 5px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		background-color: white;
		z-index: 1000;
		display: flex;
		flex-direction: column;
	}

	.chat-header {
		background-color: #007bff;
		color: white;
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: move;
		user-select: none;
	}

	.chat-header h3 {
		margin: 0;
		font-size: 16px;
	}

	.chat-header button {
		background: none;
		border: none;
		color: white;
		font-size: 18px;
		cursor: pointer;
	}

	.chat-messages {
		flex: 1;
		padding: 15px;
		overflow-y: auto;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.message-item {
		margin-bottom: 10px;
	}

	.system-message {
		background-color: #e6f7ff;
		padding: 8px 12px;
		border-radius: 4px;
		display: inline-block;
		max-width: 80%;
		align-self: flex-start;
	}

	.user-message {
		background-color: #dcf8c6;
		padding: 8px 12px;
		border-radius: 4px;
		display: inline-block;
		max-width: 80%;
		align-self: flex-end;
	}

	.chat-input {
		padding: 10px 15px;
		display: flex;
		border-top: 1px solid #e0e0e0;
	}

	.chat-input input {
		flex: 1;
		padding: 8px;
		border: 1px solid #e0e0e0;
		border-radius: 4px 0 0 4px;
		outline: none;
	}

	.chat-input button {
		background-color: #007bff;
		color: white;
		border: none;
		padding: 8px 15px;
		border-radius: 0 4px 4px 0;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.chat-input button:hover {
		background-color: #0056b3;
	}
</style>